<template>
  <WebCon>
    <div class="flex pt-96 flex-wrap">
      <div
        v-for="item in 5"
        :key="item"
        class="w-1/4 box-border p-4 sm:p-2 sm:w-1/2 lg:w-1/3"
      >
        <div class="bg-blue-600 aspect-w-1 aspect-h-1">{{ item }}</div>
      </div>
    </div>
    <button @click="playVide" class="text-theme">视频播放</button>
    <div class="text-blue-500 h-[100vh]">{{ appConfig.ip }}</div>
    <NuxtLink class="" to="/home">跳转</NuxtLink>
    <!-- <NuxtLink class="mx-9" to="./home">测试相对跳转</NuxtLink> -->
    <div class="w-80">
      <div class="aspect-w-1 aspect-h-1 bg-black/20">
        <BlurImg src="https://img.temp.im/600x30031" alt="才是"></BlurImg>
      </div>
    </div>
    <div class="h-[100vh]"></div>
    <div class="flex">
      <div class="w-1/2 bg-blue-400 h-20 wow fadeInLeft" data-wow-delay="1s"></div>
      <div class="w-1/2 bg-black h-20 wow fadeInRight"></div>
    </div>
    <!-- visibleOnce -->
    <div
      v-motion="{
        initial: {
          y: 200,
          opacity: 0,
        },
        enter: {
          y: 0,
          opacity: 1,
          transition: {
            delay: 3500,
            duration: 3000,
          },
        },
      }"
    >
      Hello
    </div>
    <!-- <div v-for="item in 20" class="w-1/2 bg-theme mb-4 h-40 wow fadeInUp"></div> -->
  </WebCon>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { appConfig } from "~/utils";

const playVide = () => {
  playVideo(
    "https://roasee.cn/container_roase/images/roasee/2024-03-21/1711010448905.mp4",
    "https://workyd.com/image/source_plant/avatar.png"
  );
};
onMounted(() => {
  if (window) {
  }
});
useHead({
  base: { href: "/blog" },
});

definePageMeta({
  middleware: ["auth"],
  // layout: true,
});
useHead({
  title: "博客",
  meta: [
    {
      name: "keywords",
      content: "博客",
    },
    {
      name: "description",
      content: "博客",
    },
  ],
});
</script>
<style lang="scss" scoped>
.box {
}
</style>
